import React from 'react'
import { Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { useRef } from 'react'
import styles from './styles.module.less'
import { DnFC } from '@designable/react'
import { useT, createEvent } from '@designable/event-system'
import { useForm } from '@formily/react'
import { useState } from 'react'

type PropsType = {
  disabled?: boolean
  buttonText?: string
  ButtonType?: string
  onChange: (file: any) => void
  value: any
  'data-designer-node-id'?: string
  downloadTemplateExpression?: string // 下载模板表达式
  explainText?: string // 说明文本
  onChangeExpression?: string // 文件变化表达式
}

export const ButtonUploadExcel: DnFC<PropsType> = (props) => {
  const {
    onChange,
    buttonText,
    ButtonType = 'default',
    disabled,
    'data-designer-node-id': designerNodeId,
    downloadTemplateExpression,
    explainText,
  } = props
  const fileRef = useRef<HTMLInputElement>(null)
  const [fileName, setFileName] = useState('')
  const $t = useT()
  const form = useForm()

  const onChangeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setFileName(file.name)
      onChange(file)
    }
  }

  const handleDownloadTemplate = async () => {
    if (downloadTemplateExpression) {
      try {
        await createEvent(downloadTemplateExpression, {
          form,
          $t,
        })
      } catch (error) {
        console.error('执行下载模板表达式失败:', error)
      }
    }
  }

  return (
    <div data-designer-node-id={designerNodeId}>
      <Button
        icon={<UploadOutlined />}
        type={ButtonType as any}
        onClick={() => {
          fileRef.current?.click()
        }}
        disabled={disabled}
      >
        {buttonText || '导入用户'}
      </Button>
      <input
        ref={fileRef}
        onChange={onChangeFile}
        style={{ display: 'none' }}
        type="file"
        name="file"
        accept=".xlsx,.xls,.xlsm"
      />
      {fileName && (
        <div className={styles.fileHandle}>
          <div className={styles.left}>
            <img
              src={
                'https://oss-images.dragonpass.com.cn/business-saas/platform/2025-10-22_062348/excel-ico.png'
              }
              className={styles.excelIco}
            />
            <div className={styles.name}>{fileName}</div>
          </div>
          <div className={styles.right}>
            <img
              src={
                'https://oss-images.dragonpass.com.cn/business-saas/platform/2025-10-22_062411/delete-ico.png'
              }
              className={styles.deleteIco}
              onClick={() => {
                if (fileRef && fileRef.current) fileRef.current.value = ''
                onChange(null)
                setFileName('')
              }}
            />
          </div>
        </div>
      )}
      <div style={{ marginTop: '6px' }}>
        {$t('1、支持文件格式为XLS、XLSX，')}
        <a onClick={handleDownloadTemplate}>{$t('下载模板')}</a>
      </div>
      <div style={{ margin: '10px 0' }}>{explainText}</div>
    </div>
  )
}
